<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-08 21:00:17
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-12 18:38:14
-->
<template>
  <div class="popup-container">
    <div class="header">
      <span>车辆信息</span>
      <el-button type="primary" size="small">轨迹</el-button>
      <el-button type="danger" size="small" @click.stop="handleFaultInput">故障上报</el-button>
    </div>
    <el-table :data="dataOfCar" border style="width: 100%" :show-header="showHeader">
      <el-table-column prop="key" align="center"/>
      <el-table-column prop="value" align="center"/>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {storeToRefs} from 'pinia'
import {usePostStore} from '@/stores'
const postStore = usePostStore();
const {updateSelectCarOfFault} = postStore;
const {selectCarOfFault}  = storeToRefs(postStore);
const showHeader = false;
const props = defineProps({
  car: {
    type: Object,
    required:true,
  },
});
const dataOfCar = ref([]);
onMounted(() => {
  const values = Object.values(props.car);
  const keys = ['编号','状态','电量','里程','次数','是否违规'];
  const valueIndex = [0,2,3,4,5,1];
  keys.forEach((key,index)=>{
    const itemObj = {key:key};
    let value;
    if(index == 3){
      value  = values[valueIndex[index]] + 'km';
    }else if(index == 5){
      value = checkViolation(values[valueIndex[index]]);
    }else{
      value = values[valueIndex[index]];
    }
    itemObj.value = value;
    dataOfCar.value.push(itemObj);
  })
});
//检测是否违规
const checkViolation = (coordinates)=>{
  return '否'
}

//处理故障上报
const handleFaultInput = ()=>{
  if(!selectCarOfFault.value){
    updateSelectCarOfFault(props.car);
  }
}
</script>

<style scoped>
.popup-container {
  margin-top: 20px;
}
.header{
  margin-bottom: 10px;
}
.header span {
  font-weight: 600;
  font-size: 17px;
  margin-right: 10px;
}
</style>
